<template>
  <div :style="{height:height}" style="position: relative;">
    <editor
      v-model="content"
      @init="editorInit"
      :options="options"
      :lang="lang"
      :theme="theme"
      width="calc(100%)"
      height="calc(100%)"></editor>
    <!-- <el-select placeholder="切换主题" style="width: 120px;position: absolute;right: 10px;top: 10px;" @change="handleChange">
      <el-option :value="item" v-for="(item,index) in themeList" :key="index">
        {{ item }}
      </el-option>
    </el-select> -->
  </div>
</template>

<script>
  export default {
    components: {
      editor: require('vue2-ace-editor')
    },
    props: {
      value: null,
      height: {
        type: String,
        default: '350px'
      },
      lang: {
        type: String,
        default: 'groovy'
      }
    },
    watch: {
      content(newValue) {
        this.$emit('input', newValue)
      },
      value(newValue) {
        this.content = newValue
      }
    },
    mounted() {
      this.content = this.value
      this.theme = localStorage.getItem('theme') || 'monokai'
    },
    data() {
      return {
        content: '',
        // 通过配置options的值配置语法提示
        options: { /* vue2-ace-editor编辑器配置自动补全等 */
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true, /*,, 自动补全 */
					readOnly:true
        },
        themeList: ['ambiance', 'chrome', 'chaos', 'clouds', 'clouds_midnight', 'cobalt', 'crimson_editor', 'dawn',
          'dracula', 'dreamweaver', 'eclipse', 'github',
          'gob', 'gruvbox', 'idle_fingers', 'tomorrow', 'tomorrow_night', 'tomorrow_night_blue',
          'tomorrow_night_bright', 'tomorrow_night_eighties', 'xcode',
          'sqlserver', 'solarized_light', 'monokai'
        ],
        theme: 'ambiance'
      }
    },
    methods: {
      handleChange(val) {
        this.theme = val
        localStorage.setItem('theme', val)
      },
      editorInit() {
        require('brace/ext/language_tools') // language extension prerequsite...
        require('brace/mode/html')
        require('brace/mode/javascript') // language
        require('brace/mode/groovy')
        require('brace/mode/json')
        require('brace/mode/sql')
        require('brace/mode/less')
        require('brace/theme/chrome')
        require('brace/theme/ambiance')
        require('brace/theme/chaos')
        require('brace/theme/clouds')
        require('brace/theme/clouds_midnight')
        require('brace/theme/cobalt')
        require('brace/theme/crimson_editor')
        require('brace/theme/dawn')
        require('brace/theme/dracula')
        require('brace/theme/dreamweaver')
        require('brace/theme/eclipse')
        require('brace/theme/github')
        require('brace/theme/gob')
        require('brace/theme/gruvbox')
        require('brace/theme/idle_fingers')
        require('brace/theme/tomorrow')
        require('brace/theme/tomorrow_night')
        require('brace/theme/tomorrow_night_blue')
        require('brace/theme/tomorrow_night_bright')
        require('brace/theme/tomorrow_night_eighties')
        require('brace/theme/xcode')
        require('brace/theme/sqlserver')
        require('brace/theme/solarized_light')
        require('brace/theme/monokai')
        require('brace/snippets/javascript') // snippet
      }
    }
  }
</script>

<style>
  .ace_print-margin {
    display: none;
  }
</style>
